<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>负margin</title>
	<style type="text/css">
		.box {
			background: red;
			width: 200px;
			height: 100px;
			color: #fff;
		}

		.box:nth-child(2) {
			background-color: rgba(0, 0, 0, .5);
		}

		.negative--v .box:nth-child(2) {
			margin-top: -20px;
			margin-bottom: -30px;
		}

		.negative--h .box,
		.normal--h .box {
			display: inline-block;
			vertical-align: middle;
		}

		.negative--h .box:nth-child(2) {
			margin-left: -20px;
			margin-right: -30px;
		}

		.flexbox {
			display: flex;
		}

		.flexbox .margin-normal {
			margin-right: 50px;
		}

		.flexbox .margin-normal .box:nth-child(2) {
			margin-top: 20px;
			margin-bottom: 30px;
		}

		.normal--h .box:nth-child(2) {
			margin-left: 20px;
			margin-right: 30px;
		}

		.margin-normal {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<h2>垂直方向负margin</h2>
	<div class="flexbox">
		<div class="margin-normal">
			<div class="box"></div><div class="box">margin-top: 20px;<br>
			margin-bottom: 30px;</div><div class="box"></div>
		</div>
		<div class="margin-negative negative--v">
			<div class="box"></div><div class="box">margin-top: -20px;<br>
			margin-bottom: -30px;</div><div class="box"></div>
		</div>
	</div>
	<h2>水平方向负margin</h2>
	<div class="margin-normal normal--h">
		<div class="box"></div><div class="box">
			margin-left: 20px;<br>
			margin-right: 30px;</div><div class="box"></div>
	</div>
	<div class="margin-negative negative--h">
		<div class="box"></div><div class="box">
			margin-left: -20px;<br>
			margin-right: -30px;</div><div class="box"></div>
	</div>
		
</body>
</html>

